<template>
  <div class="task-detail" v-loading="loading">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <el-button @click="goBack" text>
          <el-icon><ArrowLeft /></el-icon>
          返回
        </el-button>
        <div class="task-title">
          <div class="priority-indicator" :class="task.priority"></div>
          <h1>{{ task.title }}</h1>
          <el-tag :type="getStatusType(task.status)" size="large">
            {{ task.status }}
          </el-tag>
        </div>
      </div>
      <div class="header-right">
        <el-button @click="editTask">
          <el-icon><Edit /></el-icon>
          编辑
        </el-button>
        <el-dropdown @command="handleCommand">
          <el-button>
            更多操作
            <el-icon class="el-icon--right"><ArrowDown /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="assign">
                <el-icon><User /></el-icon>
                分配任务
              </el-dropdown-item>
              <el-dropdown-item command="duplicate">
                <el-icon><CopyDocument /></el-icon>
                复制任务
              </el-dropdown-item>
              <el-dropdown-item command="export">
                <el-icon><Download /></el-icon>
                导出任务
              </el-dropdown-item>
              <el-dropdown-item command="delete" divided>
                <el-icon><Delete /></el-icon>
                删除任务
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    
    <div class="task-content">
      <!-- 左侧主要内容 -->
      <div class="main-content">
        <!-- 任务描述 -->
        <div class="section">
          <h3>任务描述</h3>
          <div class="description-content">
            <p v-if="task.description">{{ task.description }}</p>
            <p v-else class="no-description">暂无描述</p>
          </div>
        </div>
        
        <!-- 子任务 -->
        <div class="section">
          <div class="section-header">
            <h3>子任务 ({{ subtasks.length }})</h3>
            <el-button size="small" @click="addSubtask">
              <el-icon><Plus /></el-icon>
              添加子任务
            </el-button>
          </div>
          <div class="subtasks-list">
            <div
              class="subtask-item"
              v-for="subtask in subtasks"
              :key="subtask.id"
            >
              <el-checkbox
                v-model="subtask.completed"
                @change="updateSubtask(subtask)"
              >
                <span :class="{ 'completed': subtask.completed }">
                  {{ subtask.title }}
                </span>
              </el-checkbox>
              <el-button
                text
                size="small"
                @click="deleteSubtask(subtask.id)"
              >
                <el-icon><Delete /></el-icon>
              </el-button>
            </div>
            <div class="subtask-progress">
              <el-progress
                :percentage="subtaskProgress"
                :stroke-width="6"
                :show-text="false"
              />
              <span class="progress-text">
                {{ completedSubtasks }}/{{ subtasks.length }} 已完成
              </span>
            </div>
          </div>
        </div>
        
        <!-- 附件 -->
        <div class="section">
          <div class="section-header">
            <h3>附件 ({{ attachments.length }})</h3>
            <el-upload
              :action="uploadUrl"
              :headers="uploadHeaders"
              :on-success="handleUploadSuccess"
              :show-file-list="false"
              multiple
            >
              <el-button size="small">
                <el-icon><Upload /></el-icon>
                上传附件
              </el-button>
            </el-upload>
          </div>
          <div class="attachments-list">
            <div
              class="attachment-item"
              v-for="attachment in attachments"
              :key="attachment.id"
            >
              <div class="attachment-info">
                <el-icon class="file-icon"><Document /></el-icon>
                <div class="file-details">
                  <span class="file-name">{{ attachment.name }}</span>
                  <span class="file-meta">
                    {{ formatFileSize(attachment.size) }} · 
                    {{ formatDate(attachment.uploadedAt) }}
                  </span>
                </div>
              </div>
              <div class="attachment-actions">
                <el-button text size="small" @click="downloadAttachment(attachment)">
                  <el-icon><Download /></el-icon>
                </el-button>
                <el-button text size="small" @click="deleteAttachment(attachment.id)">
                  <el-icon><Delete /></el-icon>
                </el-button>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 评论 -->
        <div class="section">
          <div class="section-header">
            <h3>评论 ({{ comments.length }})</h3>
          </div>
          
          <!-- 添加评论 -->
          <div class="add-comment">
            <el-input
              v-model="newComment"
              type="textarea"
              :rows="3"
              placeholder="添加评论..."
              resize="none"
            />
            <div class="comment-actions">
              <el-button @click="newComment = ''">取消</el-button>
              <el-button type="primary" @click="addComment" :disabled="!newComment.trim()">
                发表评论
              </el-button>
            </div>
          </div>
          
          <!-- 评论列表 -->
          <div class="comments-list">
            <div
              class="comment-item"
              v-for="comment in comments"
              :key="comment.id"
            >
              <div class="comment-avatar">
                <el-avatar :size="32">
                  {{ comment.author.username.charAt(0).toUpperCase() }}
                </el-avatar>
              </div>
              <div class="comment-content">
                <div class="comment-header">
                  <span class="author-name">{{ comment.author.username }}</span>
                  <span class="comment-time">{{ formatDateTime(comment.createdAt) }}</span>
                </div>
                <div class="comment-text">{{ comment.content }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 右侧信息面板 -->
      <div class="side-panel">
        <!-- 任务信息 -->
        <div class="panel-section">
          <h4>任务信息</h4>
          <div class="info-list">
            <div class="info-item">
              <span class="label">状态</span>
              <el-select v-model="task.status" @change="updateTaskStatus">
                <el-option label="待开始" value="待开始" />
                <el-option label="进行中" value="进行中" />
                <el-option label="已完成" value="已完成" />
                <el-option label="已暂停" value="已暂停" />
                <el-option label="已取消" value="已取消" />
              </el-select>
            </div>
            
            <div class="info-item">
              <span class="label">优先级</span>
              <el-tag :type="getPriorityType(task.priority)" effect="plain">
                {{ getPriorityText(task.priority) }}
              </el-tag>
            </div>
            
            <div class="info-item">
              <span class="label">负责人</span>
              <div class="assignee-info" v-if="task.assignee">
                <el-avatar :size="24">
                  {{ task.assignee.username.charAt(0).toUpperCase() }}
                </el-avatar>
                <span>{{ task.assignee.username }}</span>
              </div>
              <span v-else class="unassigned">未分配</span>
            </div>
            
            <div class="info-item">
              <span class="label">所属项目</span>
              <el-tag v-if="task.project" effect="plain">
                {{ task.project.name }}
              </el-tag>
              <span v-else class="unassigned">未分配</span>
            </div>
            
            <div class="info-item">
              <span class="label">创建时间</span>
              <span>{{ formatDateTime(task.createdAt) }}</span>
            </div>
            
            <div class="info-item">
              <span class="label">截止时间</span>
              <span :class="{ 'overdue': isOverdue(task.dueDate) }">
                {{ formatDateTime(task.dueDate) }}
              </span>
            </div>
            
            <div class="info-item" v-if="task.estimatedHours">
              <span class="label">预估工时</span>
              <span>{{ task.estimatedHours }} 小时</span>
            </div>
            
            <div class="info-item" v-if="task.actualHours">
              <span class="label">实际工时</span>
              <span>{{ task.actualHours }} 小时</span>
            </div>
          </div>
        </div>
        
        <!-- 进度跟踪 -->
        <div class="panel-section">
          <h4>进度跟踪</h4>
          <div class="progress-info">
            <div class="progress-item">
              <span class="progress-label">整体进度</span>
              <el-progress :percentage="task.progress || 0" :stroke-width="8" />
            </div>
            <div class="progress-item">
              <span class="progress-label">子任务进度</span>
              <el-progress :percentage="subtaskProgress" :stroke-width="8" />
            </div>
          </div>
        </div>
        
        <!-- 时间记录 -->
        <div class="panel-section">
          <h4>时间记录</h4>
          <div class="time-tracking">
            <el-button size="small" type="primary" @click="startTimer" v-if="!timerRunning">
              <el-icon><VideoPlay /></el-icon>
              开始计时
            </el-button>
            <el-button size="small" type="danger" @click="stopTimer" v-else>
              <el-icon><VideoPause /></el-icon>
              停止计时 ({{ formatDuration(currentDuration) }})
            </el-button>
            
            <div class="time-logs" v-if="timeLogs.length > 0">
              <div class="time-log" v-for="log in timeLogs" :key="log.id">
                <div class="log-info">
                  <span class="log-duration">{{ formatDuration(log.duration) }}</span>
                  <span class="log-date">{{ formatDate(log.date) }}</span>
                </div>
                <el-button text size="small" @click="deleteTimeLog(log.id)">
                  <el-icon><Delete /></el-icon>
                </el-button>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 相关任务 -->
        <div class="panel-section">
          <h4>相关任务</h4>
          <div class="related-tasks">
            <div
              class="related-task"
              v-for="relatedTask in relatedTasks"
              :key="relatedTask.id"
              @click="viewRelatedTask(relatedTask.id)"
            >
              <div class="task-priority" :class="relatedTask.priority"></div>
              <div class="task-info">
                <span class="task-title">{{ relatedTask.title }}</span>
                <el-tag :type="getStatusType(relatedTask.status)" size="small">
                  {{ relatedTask.status }}
                </el-tag>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 添加子任务对话框 -->
  <el-dialog
    v-model="subtaskDialogVisible"
    title="添加子任务"
    width="600px"
    :before-close="cancelAddSubtask"
  >
    <el-form :model="newSubtask" label-width="100px">
      <el-form-item label="任务标题" required>
        <el-input
          v-model="newSubtask.title"
          placeholder="请输入子任务标题"
          maxlength="100"
          show-word-limit
        />
      </el-form-item>
      
      <el-form-item label="任务描述">
        <el-input
          v-model="newSubtask.description"
          type="textarea"
          :rows="3"
          placeholder="请输入子任务描述（可选）"
          maxlength="500"
          show-word-limit
        />
      </el-form-item>
      
      <el-form-item label="负责人">
        <el-select
          v-model="newSubtask.assignee"
          placeholder="请选择负责人（可选）"
          clearable
          style="width: 100%"
        >
          <el-option
            v-for="user in availableAssignees"
            :key="user.id"
            :label="user.name"
            :value="user.id"
          />
        </el-select>
      </el-form-item>
      
      <el-form-item label="截止日期">
        <el-date-picker
          v-model="newSubtask.dueDate"
          type="date"
          placeholder="请选择截止日期（可选）"
          style="width: 100%"
          :disabled-date="(time: Date) => time.getTime() < Date.now() - 8.64e7"
        />
      </el-form-item>
      
      <el-form-item label="优先级">
        <el-select v-model="newSubtask.priority" style="width: 100%">
          <el-option label="低" value="low" />
          <el-option label="中" value="medium" />
          <el-option label="高" value="high" />
        </el-select>
      </el-form-item>
    </el-form>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancelAddSubtask">取消</el-button>
        <el-button type="primary" @click="confirmAddSubtask">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import { ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'
import {
  ArrowLeft,
  Edit,
  ArrowDown,
  User,
  CopyDocument,
  Download,
  Delete,
  Plus,
  Upload,
  Document,
  VideoPlay,
  VideoPause
} from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()


const loading = ref(false)
const newComment = ref('')
const timerRunning = ref(false)
const currentDuration = ref(0)
const timerInterval = ref<number | null>(null)

// 任务ID
const taskId = computed(() => Number(route.params.id))

// 模拟任务数据
const task = ref({
  id: 1,
  title: '实现用户认证功能',
  description: '完成用户登录、注册和权限验证功能，包括JWT token生成和验证、用户角色管理、密码加密等核心功能。需要确保系统安全性和用户体验的平衡。',
  status: '进行中',
  priority: 'high',
  progress: 65,
  dueDate: new Date(Date.now() + 1000 * 60 * 60 * 24 * 3),
  project: { id: 1, name: '项目管理系统' },
  assignee: { id: 1, username: '张三' },
  createdAt: new Date('2024-01-15'),
  estimatedHours: 40,
  actualHours: 26
})

// 子任务
const subtasks = ref([
  { id: 1, title: '设计用户表结构', completed: true },
  { id: 2, title: '实现用户注册接口', completed: true },
  { id: 3, title: '实现用户登录接口', completed: true },
  { id: 4, title: '实现JWT token验证', completed: false },
  { id: 5, title: '实现权限验证中间件', completed: false },
  { id: 6, title: '编写单元测试', completed: false }
])

// 附件
const attachments = ref([
  {
    id: 1,
    name: '用户认证设计文档.pdf',
    size: 2048576,
    uploadedAt: new Date('2024-01-16')
  },
  {
    id: 2,
    name: 'API接口文档.docx',
    size: 1024000,
    uploadedAt: new Date('2024-01-17')
  }
])

// 评论
const comments = ref([
  {
    id: 1,
    content: '已完成用户表设计，请review一下结构是否合理。',
    author: { id: 1, username: '张三' },
    createdAt: new Date('2024-01-16 10:30:00')
  },
  {
    id: 2,
    content: '表结构看起来不错，建议增加用户状态字段。',
    author: { id: 2, username: '李四' },
    createdAt: new Date('2024-01-16 14:20:00')
  },
  {
    id: 3,
    content: '好的，我会添加用户状态字段，然后继续开发登录接口。',
    author: { id: 1, username: '张三' },
    createdAt: new Date('2024-01-16 15:45:00')
  }
])

// 时间记录
const timeLogs = ref([
  { id: 1, duration: 7200, date: new Date('2024-01-15') }, // 2小时
  { id: 2, duration: 14400, date: new Date('2024-01-16') }, // 4小时
  { id: 3, duration: 10800, date: new Date('2024-01-17') } // 3小时
])

// 相关任务
const relatedTasks = ref([
  {
    id: 2,
    title: '设计数据库表结构',
    status: '已完成',
    priority: 'medium'
  },
  {
    id: 4,
    title: 'API接口开发',
    status: '进行中',
    priority: 'high'
  }
])

// 上传配置
const uploadUrl = ref('/api/tasks/attachments')
const uploadHeaders = ref({
  Authorization: `Bearer ${localStorage.getItem('token')}`
})

// 计算属性
const completedSubtasks = computed(() => {
  return subtasks.value.filter(task => task.completed).length
})

const subtaskProgress = computed(() => {
  if (subtasks.value.length === 0) return 0
  return Math.round((completedSubtasks.value / subtasks.value.length) * 100)
})

// 获取状态类型
const getStatusType = (status: string): 'success' | 'warning' | 'danger' | 'info' | 'primary' => {
  const types: Record<string, 'success' | 'warning' | 'danger' | 'info' | 'primary'> = {
    '待开始': 'info',
    '进行中': 'warning',
    '已完成': 'success',
    '已暂停': 'info',
    '已取消': 'danger'
  }
  return types[status] || 'info'
}

// 获取优先级类型
const getPriorityType = (priority: string): 'success' | 'warning' | 'danger' | 'info' | 'primary' => {
  const types: Record<string, 'success' | 'warning' | 'danger' | 'info' | 'primary'> = {
    'high': 'danger',
    'medium': 'warning',
    'low': 'success'
  }
  return types[priority] || 'info'
}

// 获取优先级文本
const getPriorityText = (priority: string) => {
  const texts: Record<string, string> = {
    'high': '高',
    'medium': '中',
    'low': '低'
  }
  return texts[priority] || priority
}

// 格式化日期
const formatDate = (date: Date) => {
  return dayjs(date).format('YYYY-MM-DD')
}

// 格式化日期时间
const formatDateTime = (date: Date) => {
  return dayjs(date).format('YYYY-MM-DD HH:mm')
}

// 检查是否过期
const isOverdue = (date: Date) => {
  return dayjs(date).isBefore(dayjs(), 'day')
}

// 格式化文件大小
const formatFileSize = (bytes: number) => {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

// 格式化时长
const formatDuration = (seconds: number) => {
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  return `${hours}h ${minutes}m`
}

// 返回
const goBack = () => {
  router.back()
}

// 编辑任务
const editTask = () => {
  router.push(`/tasks/${taskId.value}/edit`)
}

// 操作处理
const handleCommand = (command: string) => {
  switch (command) {
    case 'assign':
      assignTask()
      break
    case 'duplicate':
      duplicateTask()
      break
    case 'export':
      exportTask()
      break
    case 'delete':
      deleteTask()
      break
  }
}

// 分配任务
const assignTask = () => {
  router.push(`/tasks/${taskId.value}/assign`)
}

// 复制任务
const duplicateTask = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要复制这个任务吗？',
      '确认复制',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }
    )
    
    // 模拟复制任务
    const duplicatedTask = {
      ...task.value,
      id: Date.now(),
      title: `${task.value.title} (副本)`,
      status: '待开始',
      createdAt: new Date()
    }
    
    ElMessage.success('任务复制成功')
    // 跳转到新任务详情页
    router.push(`/tasks/${duplicatedTask.id}`)
  } catch {
    // 用户取消复制
  }
}

// 导出任务
const exportTask = () => {
  const taskData = {
    ...task.value,
    subtasks: subtasks.value,
    attachments: attachments.value,
    comments: comments.value,
    timeLogs: timeLogs.value,
    relatedTasks: relatedTasks.value
  }
  
  const dataStr = JSON.stringify(taskData, null, 2)
  const dataBlob = new Blob([dataStr], { type: 'application/json' })
  const url = URL.createObjectURL(dataBlob)
  
  const link = document.createElement('a')
  link.href = url
  link.download = `task-${task.value.id}-${task.value.title}.json`
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  URL.revokeObjectURL(url)
  
  ElMessage.success('任务数据导出成功')
}

// 删除任务
const deleteTask = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要删除这个任务吗？删除后无法恢复。',
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    ElMessage.success('任务删除成功')
    router.push('/tasks')
  } catch {
    // 用户取消删除
  }
}

// 更新任务状态
const updateTaskStatus = () => {
  ElMessage.success('任务状态更新成功')
}

// 添加子任务对话框相关
const subtaskDialogVisible = ref(false)
const newSubtask = ref({
  title: '',
  description: '',
  assignee: null as number | null,
  dueDate: '',
  priority: 'medium'
})

// 可选的负责人列表
const availableAssignees = ref([
  { id: 1, username: '张三', name: '张三' },
  { id: 2, username: '李四', name: '李四' },
  { id: 3, username: '王五', name: '王五' },
  { id: 4, username: '赵六', name: '赵六' }
])

// 添加子任务
const addSubtask = () => {
  subtaskDialogVisible.value = true
  // 重置表单
  newSubtask.value = {
    title: '',
    description: '',
    assignee: null,
    dueDate: '',
    priority: 'medium'
  }
}

// 确认添加子任务
const confirmAddSubtask = () => {
  if (!newSubtask.value.title.trim()) {
    ElMessage.warning('请输入子任务标题')
    return
  }
  
  const assigneeInfo = availableAssignees.value.find(user => user.id === newSubtask.value.assignee)
  
  const subtask = {
    id: Date.now(),
    title: newSubtask.value.title,
    description: newSubtask.value.description,
    completed: false,
    assignee: assigneeInfo ? { id: assigneeInfo.id, username: assigneeInfo.username } : null,
    dueDate: newSubtask.value.dueDate ? new Date(newSubtask.value.dueDate) : null,
    priority: newSubtask.value.priority,
    createdAt: new Date()
  }
  
  subtasks.value.push(subtask)
  subtaskDialogVisible.value = false
  ElMessage.success('子任务添加成功')
}

// 取消添加子任务
const cancelAddSubtask = () => {
  subtaskDialogVisible.value = false
}

// 更新子任务
const updateSubtask = (subtask: any) => {
  ElMessage.success(`子任务"${subtask.title}"状态已更新`)
}

// 删除子任务
const deleteSubtask = (id: number) => {
  subtasks.value = subtasks.value.filter(task => task.id !== id)
  ElMessage.success('子任务删除成功')
}

// 上传成功处理
const handleUploadSuccess = (response: any) => {
  attachments.value.push({
    id: Date.now(),
    name: response.name,
    size: response.size,
    uploadedAt: new Date()
  })
  ElMessage.success('附件上传成功')
}

// 下载附件
const downloadAttachment = (attachment: any) => {
  ElMessage.info(`下载附件: ${attachment.name}`)
}

// 删除附件
const deleteAttachment = (id: number) => {
  attachments.value = attachments.value.filter(att => att.id !== id)
  ElMessage.success('附件删除成功')
}

// 添加评论
const addComment = () => {
  if (!newComment.value.trim()) return
  
  comments.value.push({
    id: Date.now(),
    content: newComment.value,
    author: { id: 1, username: '当前用户' },
    createdAt: new Date()
  })
  
  newComment.value = ''
  ElMessage.success('评论发表成功')
}

// 开始计时
const startTimer = () => {
  timerRunning.value = true
  currentDuration.value = 0
  
  timerInterval.value = window.setInterval(() => {
    currentDuration.value++
  }, 1000)
}

// 停止计时
const stopTimer = () => {
  if (timerInterval.value) {
    clearInterval(timerInterval.value)
    timerInterval.value = null
  }
  
  if (currentDuration.value > 0) {
    timeLogs.value.push({
      id: Date.now(),
      duration: currentDuration.value,
      date: new Date()
    })
    
    ElMessage.success(`已记录工时: ${formatDuration(currentDuration.value)}`)
  }
  
  timerRunning.value = false
  currentDuration.value = 0
}

// 删除时间记录
const deleteTimeLog = (id: number) => {
  timeLogs.value = timeLogs.value.filter(log => log.id !== id)
  ElMessage.success('时间记录删除成功')
}

// 查看相关任务
const viewRelatedTask = (id: number) => {
  router.push(`/tasks/${id}`)
}

// 加载数据
const loadData = async () => {
  loading.value = true
  try {
    // 这里应该调用API加载任务详情
    // await taskStore.fetchTask(taskId.value)
    await new Promise(resolve => setTimeout(resolve, 500))
  } catch (error) {
    console.error('加载任务详情失败:', error)
    ElMessage.error('加载任务详情失败')
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadData()
})

onUnmounted(() => {
  if (timerInterval.value) {
    clearInterval(timerInterval.value)
  }
})
</script>

<style scoped>
.task-detail {
  padding: 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e6e6e6;
}

.header-left {
  flex: 1;
}

.task-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.priority-indicator {
  width: 4px;
  height: 24px;
  border-radius: 2px;
}

.priority-indicator.high {
  background: #f56c6c;
}

.priority-indicator.medium {
  background: #e6a23c;
}

.priority-indicator.low {
  background: #67c23a;
}

.task-title h1 {
  margin: 0;
  font-size: 24px;
  color: #333;
  font-weight: 600;
}

.header-right {
  display: flex;
  gap: 12px;
}

.task-content {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
}

.main-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.section {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  color: #333;
  font-weight: 600;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-header h3 {
  margin: 0;
}

.description-content p {
  margin: 0;
  line-height: 1.6;
  color: #666;
}

.no-description {
  color: #999;
  font-style: italic;
}

.subtasks-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.subtask-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.subtask-item:last-child {
  border-bottom: none;
}

.completed {
  text-decoration: line-through;
  color: #999;
}

.subtask-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

.progress-text {
  font-size: 14px;
  color: #666;
  white-space: nowrap;
}

.attachments-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.attachment-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  transition: all 0.3s;
}

.attachment-item:hover {
  border-color: #409eff;
  background: #f0f8ff;
}

.attachment-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.file-icon {
  font-size: 20px;
  color: #409eff;
}

.file-details {
  display: flex;
  flex-direction: column;
}

.file-name {
  font-weight: 500;
  color: #333;
}

.file-meta {
  font-size: 12px;
  color: #999;
}

.attachment-actions {
  display: flex;
  gap: 8px;
}

.add-comment {
  margin-bottom: 20px;
}

.comment-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 12px;
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.comment-item {
  display: flex;
  gap: 12px;
}

.comment-content {
  flex: 1;
}

.comment-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.author-name {
  font-weight: 500;
  color: #333;
}

.comment-time {
  font-size: 12px;
  color: #999;
}

.comment-text {
  line-height: 1.6;
  color: #666;
}

.side-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.panel-section {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.panel-section h4 {
  margin: 0 0 16px 0;
  font-size: 14px;
  color: #333;
  font-weight: 600;
}

.info-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.label {
  font-size: 12px;
  color: #999;
  font-weight: 500;
}

.assignee-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.unassigned {
  color: #999;
  font-style: italic;
}

.overdue {
  color: #f56c6c;
  font-weight: 600;
}

.progress-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.progress-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.progress-label {
  font-size: 12px;
  color: #666;
}

.time-tracking {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.time-logs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.time-log {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
}

.log-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.log-duration {
  font-weight: 500;
  color: #333;
}

.log-date {
  font-size: 12px;
  color: #999;
}

.related-tasks {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.related-task {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
}

.related-task:hover {
  border-color: #409eff;
  background: #f0f8ff;
}

.task-priority {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.task-priority.high {
  background: #f56c6c;
}

.task-priority.medium {
  background: #e6a23c;
}

.task-priority.low {
  background: #67c23a;
}

.task-info {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.task-title {
  font-size: 12px;
  color: #333;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .task-content {
    grid-template-columns: 1fr;
  }
  
  .side-panel {
    order: -1;
  }
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .task-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .header-right {
    justify-content: center;
  }
}
</style>